<!--
 * @Author: YTian
 * @Date: 2023-05-15 13:35:05
 * @LastEditTime: 2023-05-20 09:29:33
 * @Description: 歌单详情页面
 * @FilePath: \pcsong\src\views\playlist\PlayList.vue
-->
<script setup>
// ========= 导入全局api ========= //
import { api_song__list__detail, song__details } from '@/global/api.ts'

// ========= 导入vue api ========= //
import { onActivated, ref } from 'vue'

// ========= 导入路由 ========= //
import { useRoute } from 'vue-router'

// ========= 导入详情组件 ========= //
import Details from '@/components/Details.vue'

// & 获取路由对象
const route = useRoute()

let id = route.query.id

// & 歌单数据
let introduce = ref(await api_song__list__detail(id))

// & 音乐列表
let song__list = ref(await song__details(introduce.value.song__ids))

onActivated(async () => {
	let temp_id = route.query.id

	if (id !== temp_id) {
		id = temp_id

		introduce.value = {
			cover: '',
			name: '正在获取~',
			description: '暂无'
		}

		song__list.value.splice(0)

		const res = await api_song__list__detail(temp_id)

		introduce.value = res

		song__list.value = await song__details(res.song__ids)
	}
})
</script>

<template>
	<Details :introduce="introduce" :song__list="song__list" />
</template>

<style scoped></style>
